<template>
    <xt-card>
        <div class="row-search">
            <el-form :inline="true" :model="searchForm">
                <el-form-item>
                    <el-input v-model="searchForm.title" placeholder="请输入标题搜索" />
                </el-form-item>
                <el-form-item>
                    <el-cascader
                        v-model="searchForm.artCatValue"
                        :options="catOptions"
                        :props='{
                            value: "id",
                            label: "acName",
                            checkStrictly: true
                        }'
                        
                        @change="cHandleChange" >
                        <template #default="{ data }">
                            <span>{{ data.acName }}</span>
                        </template>
                    </el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchForm.status" placeholder="状态">
                        <el-option label="全部" :value="-1"></el-option>
                        <el-option label="正常" :value="0"></el-option>
                        <el-option label="审核中" :value="1"></el-option>
                        <el-option label="审核失败" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClick">查询</el-button>
                    <el-button type="success" @click="addClick">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="row-table">
            <el-table :data="tableData" 
                style="width: 100%" :max-height="tableMaxHeight"
                v-if="tableMaxHeight > 0">
                <el-table-column fixed type="index" width="80" label="序号" />
                <el-table-column fixed prop="artTitle" label="标题" width="350" />
                <el-table-column prop="acName" label="分类" width="180" />
                <el-table-column prop="artPublishTime" label="发布时间" width="180" />
                <el-table-column label="状态" width="80">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.artStatus == 0">正常</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.artStatus == 1">审核中</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.artStatus == 2">审核失败</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="artPublishUsername" label="发布人" width="180" />
                <el-table-column fixed="right" label="操作" width="180">
                    <template #default="scope">
                        <el-button @click.prevent="editRowClick(scope.$index, scope.row)" type="primary" size="mini">
                            编辑
                        </el-button>
                        <el-button @click.prevent="deleteRowClick(scope.$index, scope.row)" type="danger" size="mini">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="row-pager">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchForm.page"
                :page-sizes="[20, 50, 100, 200, 300, 400]"
                :page-size="searchForm.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="searchForm.total"
                >
            </el-pagination>
        </div>
    </xt-card>
</template>

<script setup>
    import {
        computed,
        reactive,
        toRaw
    } from "vue"
    import { nextTick, onMounted, watch, ref } from "vue"
    import { ElMessageBox,ElMessage } from 'element-plus';
    import store from '@/store'
    import { openPage } from '@/utils/tabs'
    import { request } from "@/utils/request";

    const searchForm = ref({
        artCatValue: [],
        page: 1,
        limit: 20,
        status: -1,
        total: 0
    })
    const catOptions = ref([])
    const tableData = ref([])
    const tableMaxHeight = ref(0)
    
    onMounted(()=>{
        tableMaxHeight.value = store.getters['view/getMainHeight'] - 190;
        loadList();
        loadCat();
    })

    let searchClick = () => {
        loadList();
    }

    let cHandleChange = (val) => {
        searchForm.value.cid = val[val.length - 1];
    }

    let addClick = () => {
        openPage('/article/form')
    }

    let editRowClick = (index, row) => {
        openPage('/article/form', {id: row.id})
    }

    let deleteRowClick = (index, row) => {
        console.log('-=====>deleteRowClick', index, row)
        ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            request({
                url: '/article/delete',
                method: 'get',
                params: {
                    id: row.id
                }
            }).then(function (res) {
                if(res.code == 200) {
                    ElMessage.success({
                        message: res.msg,
                        type: 'success',
                    })
                    loadList();
                }else {
                    ElMessage.error(res.msg)
                }
            })
        }).catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            });
        });
    }

    let loadCat = () => {
        request({
            url: '/artcat/list',
            method: 'get',
        }).then(function (res) {
            catOptions.value = res.data;
        }).catch(function (error) {
            console.log('失败', error);
        });
    }

    let loadList = () => {
        request({
            url: '/article/list',
            method: 'get',
            params: toRaw(searchForm.value)
        }).then(function (response) {
            console.log('res11', response);
            let res = response.data;
            searchForm.value.total = res.count;
            tableData.value = res.list;
        })
    }

    let handleSizeChange = (val) => {
        console.log(`每页 ${val} 条`)
        searchForm.value.limit = val;
        loadList();
    }

    let handleCurrentChange = (val) => {
        console.log(`当前页: ${val}`)
        searchForm.value.page = val;
        loadList();
    }
</script>

<style scoped>
    .row-search {
        margin-top: 10px;
    }

    .row-table {
        flex: 1;
        overflow: hidden;
    }

    .row-pager {
        height: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
</style>